<template>
  <div v-loading="pageDataLoading" class="page-container-padding">
    <!-- 查询条件 -->
    <div style="display: flex; align-items: center">
      <span>
        <el-date-picker
          v-model="dateRange"
          style="width: 220px"
          type="daterange"
          size="mini"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
        ></el-date-picker>
      </span>
      <span style="margin-left: 6px">
        <el-select v-model="statisticsType" style="width: 130px" size="mini">
          <el-option :value="0" label="默认统计方式"></el-option>
          <el-option :value="1" label="小组统计方式"></el-option>
        </el-select>
      </span>
      <span style="margin-left: 6px">
        <el-button type="primary" size="mini" @click="dateRangeQuery">
          统计
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="success" size="mini" @click="currentMonthQuery">
          计本月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="preMonthQuery">
          上一月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="nextMonthQuery">
          下一月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="yearQuery">全年</el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="preYearQuery">
          上一年
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="nextYearQuery">
          下一年
        </el-button>
      </span>
    </div>
    <!-- 显示统计结果 -->
    <div style="margin-top: 10px; width: 411px">
      <div>路演记录统计表</div>
      <el-table border stripe :data="statisticsList" empty-text="暂无统计数据">
        <el-table-column
          prop="admin_name"
          label="姓名"
          width="90px"
          align="center"
        >
          <template slot-scope="scope">
            <span style="cursor: pointer" @click="userCacheChange(scope.row)">
              {{ scope.row.admin_name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="total_count"
          label="路演次数"
          width="100px"
          align="right"
        ></el-table-column>
        <el-table-column
          prop="total_coin"
          label="瑞币"
          width="100px"
          align="right"
        ></el-table-column>
        <el-table-column
          prop="level_count"
          label="评级累计"
          width="120px"
          align="right"
        ></el-table-column>
      </el-table>
      <div style="color: #f34d37; font-size: 12px; margin-top: 2px">
        注：点击表中的用户名，可查看该人员的详细记录。
      </div>
    </div>

    <!-- 显示详情表 -->
    <div style="margin-top: 10px">
      <div>路演记录详情(评级规则:AA=A,AB=B,BB=C,AC=D,BC=E,CC=F(不合格))</div>
      <el-table border stripe :data="recordsShowList" empty-text="暂无详情数据">
        <el-table-column width="50" align="center">
          <template #default="scope">
            <vab-icon
              v-if="scope.row.prse_lecture_id > 0"
              :icon="['fas', 'handshake']"
            ></vab-icon>
          </template>
        </el-table-column>
        <el-table-column
          prop="create_date"
          label="日期"
          width="90px"
        ></el-table-column>
        <el-table-column
          prop="admin_name"
          label="姓名"
          width="90px"
        ></el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="applicant"
          label="部门类别"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="lecture_scale_level"
          label="规模"
          width="70px"
        ></el-table-column>
        <el-table-column
          prop="effect_flag"
          label="效果"
          width="70px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="level_flag"
          label="评级"
          width="70px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="exchange_name"
          label="交易所"
          width="120px"
          align="center"
        ></el-table-column>
        <el-table-column prop="annex" label="附件" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.annex">
              <vab-icon
                :icon="['fas', 'download']"
                @click="toDownloadAnnex(scope.row)"
              ></vab-icon>
              <span class="annex-file" @click="toPreview(scope.row)">
                {{ scope.row.annex }}
              </span>
            </span>
          </template>
        </el-table-column>
        <el-table-column width="60" align="center">
          <template #default="scope">
            <el-tag
              type="danger"
              size="mini"
              style="cursor: pointer"
              @click="toDeleteLectureRow(scope.row)"
            >
              刪除
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 5px"
        background
        layout="total, prev, pager, next, jumper"
        :current-page.sync="page"
        :page-size="pageSize"
        :total="totalCount"
        @current-change="currentPageChange"
      ></el-pagination>
    </div>

    <!-- 预览弹窗 -->
    <el-dialog width="900px" top="15px" :visible.sync="showDocxView">
      <div style="height: calc(100vh - 128px); overflow-y: auto">
        <div ref="docFile"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getMonthDatePoint,
    getYearDatePoint,
    datetimeToStr,
  } from '@/utils/datetimeUtils'
  import { getFileBlob, downloadFile } from '@/api/fileHandler'
  import {
    getLectureStatistics,
    DeleteWorkLecture,
  } from '@/api/departmentWork/lecture'
  export default {
    data() {
      return {
        statisticsType: 0,
        pageDataLoading: false,
        dateRange: [],
        statisticsList: [], // 统计表
        recordsCache: [], // 存放统计表内的所有详情数据
        userRecordsCache: [], // 当前点击的人员
        showFlag: 'total', // total or personal

        page: 1,
        pageSize: 30,
        totalCount: 0,
        recordsShowList: [], // 当前显示的数据
        showDocxView: false,
      }
    },
    mounted() {
      this.setCurrentDates()
      this.queryPageData()
    },
    methods: {
      setCurrentDates() {
        let flag = new Date().getDate() < 4 ? 'previous' : 'current'
        this.dateRange = getMonthDatePoint(new Date(), flag)
      },
      // 查询数据
      queryPageData() {
        const para = {
          start: datetimeToStr(this.dateRange[0], true, ''),
          end: datetimeToStr(this.dateRange[1], true, ''),
          st: this.statisticsType,
        }

        this.pageDataLoading = true
        getLectureStatistics(para)
          .then((res) => {
            const data = res.data
            this.statisticsList = data.statistics
            this.recordsCache = data.records

            this.showFlag = 'total'
            this.totalCount = this.recordsCache.length
            this.page = 1
            this.showRecords(1)

            this.pageDataLoading = false
          })
          .catch((err) => {
            this.pageDataLoading = false
          })
      },

      // 点击了统计表中的user
      userCacheChange(row) {
        if (row.user_id == -1) {
          this.userRecordsCache = this.recordsCache
        } else {
          this.userRecordsCache = this.recordsCache.filter((item) => {
            return item.user_id === row.user_id
          })
        }
        this.showFlag = 'personal'
        this.totalCount = this.userRecordsCache.length
        this.page = 1
        this.showRecords(1)
      },

      currentPageChange(page) {
        this.showRecords(page)
      },

      // 显示详情数据
      showRecords(page) {
        const startIndex = (page - 1) * this.pageSize
        if (this.showFlag === 'total') {
          this.recordsShowList = this.recordsCache.slice(
            startIndex,
            startIndex + this.pageSize
          )
        } else if (this.showFlag === 'personal') {
          this.recordsShowList = this.userRecordsCache.slice(
            startIndex,
            startIndex + this.pageSize
          )
        }
      },

      // 预览附件
      toPreview(row) {
        if (row.annex_url.slice(-5) === '.docx') {
          this.showDocxView = true
          getFileBlob(row.annex_url).then(({ data }) => {
            this.$docxView.renderAsync(data, this.$refs.docFile)
          })
        } else {
          this.toDownloadAnnex(row)
        }
      },

      // 下载附件
      toDownloadAnnex(row) {
        if (!row.annex) {
          return
        }
        downloadFile(row.annex_url)
      },

      // 删除记录
      toDeleteLectureRow(row) {
        this.$baseConfirm('确定删除这个记录吗?操作不可恢复!', '警告', () => {
          DeleteWorkLecture(row.id).then((res) => {
            this.$baseMessage(res.msg, 'success')
            this.queryPageData()
          })
        })
      },

      // 指定日期范围查询
      dateRangeQuery() {
        this.queryPageData()
      },

      // 本月查询
      currentMonthQuery() {
        this.dateRange = getMonthDatePoint(new Date(), 'current') // 当前月份
        this.queryPageData()
      },

      // 上一月查询
      preMonthQuery() {
        this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
        this.queryPageData()
      },

      // 下一月查询
      nextMonthQuery() {
        this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
        this.queryPageData()
      },

      // 当前月份所在全年查询
      yearQuery() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'current')
        this.queryPageData()
      },

      // 上一年查询
      preYearQuery() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'previous')
        this.queryPageData()
      },

      // 下一年查询
      nextYearQuery() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'next')
        this.queryPageData()
      },
    },
  }
</script>

<style scoped lang="scss">
  .annex-file {
    color: #0073fc;
    cursor: pointer;
    margin-left: 4px;
  }
  ::v-deep {
    .docx-wrapper {
      background-color: #fefefe;
    }
  }
</style>
